<template>
  <ConfigCard>
    <template #header>
      <!-- header -->
      <div class="px-[20px] flex justify-between items-center rounded-t-[10px] border-b border-[#808080]-2">
        <!-- 标题 -->
        <TitleConfig />
        <!-- 按钮 -->
        <div class="flex items-center gap-0.5">
          <LjButton type="success" content="计算" />
          <el-divider direction="vertical" />
          <LjButton type="danger" content="取消" />
        </div>
      </div>
    </template>

    <template #main>
      <div class="lj-main">
        <!-- title -->
        <div class="lj-header">
          <div class="lj-left">
            <!-- <div class="text-big">大牵张</div> -->
            <div class="text-small">张力场在N1，牵引场在N2。</div>
          </div>
          <div class="lj-right">
            <div class="lj-text">小牵张</div>
            <RightSmall theme="outline" size="16" fill="#fff" />
          </div>
        </div>
        <!-- container -->
        <div class="lj-container">
          <!-- <div class="lj-form">
            <span>大引绳:</span>
            <el-input v-model="model" placeholder="" class="lj-input"></el-input>
          </div> -->
          <el-form label-width="80px" :inline="false" label-position="left">
            <el-form-item label="大引绳">
              <el-input v-model="form"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </ConfigCard>
</template>

<script setup lang="ts">
import { RightSmall, Switch } from '@icon-park/vue-next'
import LjButton from '../button/LjButton.vue'
import TitleConfig from '../drawer/ConfigDrawer/ConfigCard/TitleConfig.vue'
import ConfigCard from './ConfigCard.vue'
import { ref } from 'vue'

const form = ref('')
const model = ref('')
</script>

<style scoped lang="scss">
.lj-main {
  @apply w-full rounded-[5px];
  .lj-header {
    @apply px-[20px] flex justify-between;
    .lj-left {
      @apply flex items-end gap-2;
      .text-big {
        @apply text-lg;
      }
      .text-small {
        @apply text-sm text-[#808080];
      }
    }
    .lj-right {
      @apply px-[10px] h-[30px] bg-[#34495E] translate-x-[20px] rounded-tr-[5px] flex items-center gap-[0.5px];
      .lj-text {
        @apply text-xs text-white;
      }
    }
  }
  .lj-container {
    @apply px-[20px] py-[10px];
    .lj-form {
      @apply flex items-center gap-2;
      .lj-input {
        @apply w-[200px];
      }
    }
  }
}
</style>
